<template>
	<view class="list-data">
		
		<!-- 列表循环 -->
		<view class="list u-f-column u-f-jsb" v-for="(item,index) in list" :key="index" @click="pageGo('/pages/note/details?id=' + item.id)">
			<!-- 上部分 -->
			<view class="t u-f-ac u-f-jsb">
				<view class="l">
					<text>{{item.tname}}</text>
				</view>
				<view class="r" @click.stop="deleteNote(item,index)">
					<u-icon name="trash"></u-icon>
				</view>
			</view>
			<!-- 中间部分 -->
			<view class="c">
				<!-- 标题 -->
				<view class="title u-f-ac">
					<view>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
			<!-- 底部部分 -->
			<view class="b u-f-ac u-f-jsb">
				<!-- 标签 -->
				<view class="tags">
					<view class="lst" v-for="(tag,indexs) in item.tagsList" :key="indexs">{{tag}}</view>
				</view>
				<view class="time">
					<text>{{$u.timeFrom(item.addtime, 'yyyy年mm月dd日')}}</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props:{
			list:Array
		},
		methods:{
			deleteNote(item,index){
				uni.showModal({
					title: '操作提示',
					content: '是否要删除此条记录吗',
					success: res => {
						if(res.confirm){
							this.$emit('deleteClick',{item,index})
						}
					}
				});
				
			}
		}
	}
</script>

<style scoped lang="scss">
.list-data{
	padding: 20rpx;
	.list{
		margin: 20rpx 0;
		border-radius: 15rpx;
		background-color: white;
		color: #3b3b3b;
		padding: 20rpx;
		font-size: 28rpx;
		&:nth-of-type(1){
			margin-top: 0;
		}
		.t{
			.r{
				font-size: 24rpx;
				color: #4d4d4d;
			}
			.l{
				position: relative;
				text-indent: 20rpx;
				&:after{
					position: absolute;
					left: 0;
					top: 12rpx;
					height: 20rpx;
					width: 6rpx;
					border-radius: 3rpx;
					background-color: #885f44;
					content: '';
				}
			}
		}
		.c{
			margin: 10rpx 0;
			margin-bottom: 0rpx;
			.title{
				.icon{
					margin-right: 5rpx;
				}
			}
			.desc{
				color: #626262;
				margin: 5rpx 0;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
			.xs{
				letter-spacing: 15rpx;
			}
		}
		.b{
			.tags{
				.lst{
					display: inline-block;
					padding: 5rpx 15rpx;
					padding-top: 2rpx;
					font-size: 20rpx;
					background-color: #f7d11e;
					color: #885f44;
					border-radius: 8rpx;
					margin: 5rpx 2rpx;
					transform: scale(.75);
					transform-origin: left;
					&:nth-of-type(1){
						margin-left: 0;
					}
				}
			}
			.time{
				font-size: 24rpx;
				color: #4d4d4d;
			}
		}
	}
}
</style>